<div class="flex flex-col items-center justify-center p-2 md:p-6 rounded-lg border border-neutral-700" style="max-width: 700px; margin: auto;">
  <div class="mb-4 w-full text-center">
    <span class="inline-block px-3 py-1 rounded-full bg-blue-800/60 text-blue-200 text-xs font-semibold tracking-wide mb-2">
      Open Source & Community Driven
    </span>
    <h2 class="text-2xl font-bold text-white mb-2 tracking-tight">
      Booklore
    </h2>
    <p class="text-base text-zinc-200 leading-relaxed">
      Booklore is designed to help you manage your book collection with ease and enjoyment.<br>
      If you find Booklore valuable, please consider supporting its continued development.
    </p>
  </div>
  <div class="mb-4 w-full text-center">
    <p class="text-zinc-200 italic text-sm">
      Your feedback and support help me keep Booklore improving for everyone.<br>
      <span class="text-zinc-300">- Aditya (Creator of Booklore)</span>
    </p>
  </div>
  <div class="flex md:flex-row flex-col justify-center items-center gap-3 w-full mb-4">
    <a href="https://github.com/booklore-app/booklore" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
      <p-button
        label="Star on GitHub"
        icon="pi pi-github"
        outlined
        severity="success"
        [style]="{ 'min-width': '160px' }">
      </p-button>
    </a>
    <a href="https://opencollective.com/booklore" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
      <p-button
        label="Open Collective"
        icon="pi pi-globe"
        severity="info"
        outlined>
      </p-button>
    </a>
    <a href="https://account.venmo.com/u/AdityaChandel" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
      <p-button
        label="Buy me a coffee"
        icon="pi pi-heart"
        outlined
        severity="danger">
      </p-button>
    </a>
  </div>
  <div class="w-full text-center mt-2">
    <span class="block mb-1 font-medium text-green-300 text-sm">Booklore will always remain free for everyone. That is my commitment to you.</span>
    <div class="text-gray-400 text-sm space-y-2 mt-2">
      <p>
        <span class="font-semibold text-blue-300">Open Collective</span> contributions directly support development, infrastructure, and ongoing improvements.
      </p>
      <p>
        <span class="font-semibold text-red-300">Venmo</span> is a wonderful way to show personal appreciation, think of it as buying me a coffee for my hard work.
      </p>
      <p class="text-yellow-200 pt-2">
        Every contribution, no matter the size, helps keep Booklore open, growing, and accessible to all.
      </p>
    </div>
  </div>
</div>
